<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美食详情</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2627533_d7zlvvj6zdr.css">
    <style>
        body {
            background-color: #f5f5f5;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #8c8c8c;
            font-size: 0.75rem;
        }
        .nav-item.active {
            color: #0052d9;
        }
        .icon {
            font-size: 1.2rem;
        }
        .action-icon {
            font-size: 1.5rem;
            color: #666;
        }
        .badge {
            background-color: #0052d9;
            color: white;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 10px;
            margin-right: 6px;
        }
        .rating {
            color: #ff9800;
        }
        .tab-item {
            position: relative;
            padding: 12px 0;
            font-size: 14px;
            flex: 1;
            text-align: center;
            color: #666;
        }
        .tab-item.active {
            color: #0052d9;
            font-weight: 500;
        }
        .tab-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 3px;
            background-color: #0052d9;
            border-radius: 2px;
        }
        .primary-btn {
            background-color: #0052d9;
            color: white;
            border-radius: 4px;
            padding: 8px 16px;
            font-size: 14px;
        }
        .outline-btn {
            border: 1px solid #0052d9;
            color: #0052d9;
            background-color: white;
            border-radius: 4px;
            padding: 8px 16px;
            font-size: 14px;
        }
        .bottom-shadow {
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
        }
        .tag {
            background-color: #f0f0f0;
            color: #666;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            margin-right: 6px;
            margin-bottom: 6px;
            display: inline-block;
        }
    </style>
</head>
<body class="pb-20">
    <header class="bg-white p-4 flex items-center shadow-sm">
        <a href="../service/food_category.html" class="mr-4">
            <i class="icon iconfont icon-arrow-left"></i>
        </a>
        <h1 class="text-lg font-medium flex-1 text-center">美食详情</h1>
        <div class="flex">
            <a href="#" class="mr-4">
                <i class="icon iconfont icon-share"></i>
            </a>
            <a href="#">
                <i class="icon iconfont icon-more"></i>
            </a>
        </div>
    </header>

    <!-- 轮播图 -->
    <div class="relative w-full h-64 bg-gray-200">
        <img src="https://via.placeholder.com/750x500?text=贵州丝娃娃" class="w-full h-full object-cover" alt="美食图片">
        <div class="absolute bottom-4 right-4 bg-black bg-opacity-60 text-white px-2 py-1 rounded text-xs">
            1/5
        </div>
    </div>

    <!-- 美食信息 -->
    <div class="bg-white p-4">
        <h2 class="text-xl font-bold">贵州丝娃娃</h2>
        <div class="flex items-center mt-2">
            <span class="badge">必吃</span>
            <span class="badge">贵阳特色</span>
            <span class="badge">小吃</span>
        </div>
        <div class="flex items-center mt-3">
            <div class="rating mr-2">★★★★★</div>
            <div class="text-sm font-medium mr-2">4.9</div>
            <div class="text-sm text-gray-500">月售2000+</div>
        </div>
        <div class="flex justify-between items-center mt-3">
            <div class="text-red-500 font-medium">
                <span class="text-sm">¥</span>
                <span class="text-xl">38</span>
                <span class="text-sm text-gray-500">/份</span>
            </div>
            <div class="flex">
                <button class="outline-btn mr-2">加入购物车</button>
                <button class="primary-btn">立即预订</button>
            </div>
        </div>
    </div>

    <!-- 店铺信息 -->
    <div class="bg-white mt-2 p-4">
        <div class="flex items-center">
            <div class="w-12 h-12 rounded-full overflow-hidden mr-3">
                <img src="https://via.placeholder.com/48x48?text=店铺" class="w-full h-full object-cover" alt="店铺头像">
            </div>
            <div class="flex-1">
                <div class="text-base font-medium">贵阳传统小吃坊</div>
                <div class="text-sm text-gray-500 mt-1">营业时间：10:00-22:00</div>
            </div>
            <button class="text-sm bg-blue-50 text-blue-500 px-3 py-1 rounded-full">
                进店逛逛
            </button>
        </div>
        <div class="flex items-center mt-3 text-sm">
            <div class="flex items-center mr-4">
                <i class="icon iconfont icon-location text-gray-400 mr-1"></i>
                <span>贵阳市南明区花果园J区负1层</span>
            </div>
            <a href="#" class="text-blue-500">
                <i class="icon iconfont icon-navigation"></i>
            </a>
        </div>
        <div class="flex items-center mt-2 text-sm">
            <div class="flex items-center mr-4">
                <i class="icon iconfont icon-phone text-gray-400 mr-1"></i>
                <span>0851-12345678</span>
            </div>
            <a href="#" class="text-blue-500">
                <i class="icon iconfont icon-phone-call"></i>
            </a>
        </div>
    </div>

    <!-- 切换标签 -->
    <div class="bg-white flex border-b border-gray-200 mt-2 sticky top-0 z-10">
        <div class="tab-item active">详情介绍</div>
        <div class="tab-item">用户评价</div>
        <div class="tab-item">推荐菜品</div>
    </div>

    <!-- 详情介绍 -->
    <div class="bg-white p-4">
        <h3 class="text-lg font-medium mb-3">美食介绍</h3>
        <p class="text-sm text-gray-700 leading-relaxed">
            贵州丝娃娃是贵阳最具代表性的特色小吃之一，有着"黔中第一卷"的美誉。丝娃娃主要由薄如蝉翼的米皮、各色蔬菜、辣椒酱、花生碎、炒米粉等组成。食用时将各种配料摊在薄薄的米皮上，卷成筒状，吃起来爽滑筋道，香辣可口，是贵州美食文化的代表作。
        </p>
        
        <h3 class="text-lg font-medium mb-3 mt-5">制作工艺</h3>
        <div class="mb-4">
            <img src="https://via.placeholder.com/750x300?text=制作过程" class="w-full rounded-lg" alt="制作过程">
        </div>
        <p class="text-sm text-gray-700 leading-relaxed">
            丝娃娃的制作工艺独特，首先要将大米浸泡后磨成米浆，然后在特制的平底锅上摊成薄如蝉翼的米皮。配料包括新鲜时蔬、炒米粉、酸辣椒、花生碎、蒜末等，讲究色香味俱全。食用时，将米皮平铺，添加各种配料，卷成圆筒状即可食用，外形如同包裹着花花绿绿"衣服"的"娃娃"，故得名"丝娃娃"。
        </p>
        
        <h3 class="text-lg font-medium mb-3 mt-5">营养价值</h3>
        <div class="flex flex-wrap">
            <span class="tag">低脂</span>
            <span class="tag">高纤维</span>
            <span class="tag">多种维生素</span>
            <span class="tag">矿物质丰富</span>
        </div>
        <p class="text-sm text-gray-700 leading-relaxed mt-3">
            丝娃娃以蔬菜为主，米皮作为主食，搭配多种辅料，营养均衡，含有丰富的膳食纤维和多种维生素，热量较低，是一种健康的传统小吃。
        </p>
        
        <h3 class="text-lg font-medium mb-3 mt-5">适宜人群</h3>
        <p class="text-sm text-gray-700 leading-relaxed">
            丝娃娃口味清爽，适合大众食用。但由于有辣椒成分，胃肠功能较弱或对辣椒过敏的人群应适量食用。
        </p>
    </div>

    <!-- 用户评价 -->
    <div class="bg-white p-4 mt-2">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-medium">用户评价(2345)</h3>
            <a href="#" class="text-sm text-blue-500">查看全部 ></a>
        </div>
        
        <!-- 评价1 -->
        <div class="mb-4 pb-4 border-b border-gray-100">
            <div class="flex items-center">
                <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
                    <img src="https://via.placeholder.com/40x40?text=用户1" class="w-full h-full object-cover" alt="用户头像">
                </div>
                <div>
                    <div class="text-sm font-medium">张三</div>
                    <div class="flex items-center mt-1">
                        <div class="rating text-xs mr-2">★★★★★</div>
                        <div class="text-xs text-gray-500">2025-06-01</div>
                    </div>
                </div>
            </div>
            <div class="text-sm text-gray-700 mt-2">
                这家的丝娃娃真的太好吃了！米皮薄如蝉翼，各种配料新鲜爽口，特别是那个辣椒酱，味道绝了！每次来贵阳都会来吃，强烈推荐给所有人！
            </div>
            <div class="mt-2 grid grid-cols-3 gap-2">
                <img src="https://via.placeholder.com/120x120?text=评价图1" class="w-full rounded" alt="评价图片">
                <img src="https://via.placeholder.com/120x120?text=评价图2" class="w-full rounded" alt="评价图片">
                <img src="https://via.placeholder.com/120x120?text=评价图3" class="w-full rounded" alt="评价图片">
            </div>
        </div>
        
        <!-- 评价2 -->
        <div class="mb-4 pb-4 border-b border-gray-100">
            <div class="flex items-center">
                <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
                    <img src="https://via.placeholder.com/40x40?text=用户2" class="w-full h-full object-cover" alt="用户头像">
                </div>
                <div>
                    <div class="text-sm font-medium">李四</div>
                    <div class="flex items-center mt-1">
                        <div class="rating text-xs mr-2">★★★★☆</div>
                        <div class="text-xs text-gray-500">2025-05-28</div>
                    </div>
                </div>
            </div>
            <div class="text-sm text-gray-700 mt-2">
                味道很正宗，价格也合理。米皮很薄，配料也很新鲜。就是店里人太多了，等了半小时才吃上。但为了这个味道，值得等待！
            </div>
        </div>
        
        <!-- 评价3 -->
        <div>
            <div class="flex items-center">
                <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
                    <img src="https://via.placeholder.com/40x40?text=用户3" class="w-full h-full object-cover" alt="用户头像">
                </div>
                <div>
                    <div class="text-sm font-medium">王五</div>
                    <div class="flex items-center mt-1">
                        <div class="rating text-xs mr-2">★★★★★</div>
                        <div class="text-xs text-gray-500">2025-05-20</div>
                    </div>
                </div>
            </div>
            <div class="text-sm text-gray-700 mt-2">
                第一次吃丝娃娃，没想到这么好吃！服务员很热情地教我如何卷，如何搭配配料。看起来简单，吃起来却是层次丰富。强烈推荐给第一次来贵阳的朋友们！
            </div>
            <div class="mt-2">
                <img src="https://via.placeholder.com/750x300?text=评价图片" class="w-full rounded" alt="评价图片">
            </div>
        </div>
    </div>

    <!-- 推荐菜品 -->
    <div class="bg-white p-4 mt-2">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-medium">推荐菜品</h3>
            <a href="#" class="text-sm text-blue-500">查看全部 ></a>
        </div>
        
        <div class="overflow-x-auto">
            <div class="flex space-x-3">
                <!-- 推荐菜品1 -->
                <div class="w-32 flex-shrink-0">
                    <div class="w-full h-24 bg-gray-100 rounded-lg overflow-hidden">
                        <img src="https://via.placeholder.com/128x96?text=肠旺面" class="w-full h-full object-cover" alt="推荐菜品">
                    </div>
                    <div class="mt-2">
                        <div class="text-sm font-medium">肠旺面</div>
                        <div class="text-xs text-red-500 mt-1">¥28</div>
                    </div>
                </div>
                
                <!-- 推荐菜品2 -->
                <div class="w-32 flex-shrink-0">
                    <div class="w-full h-24 bg-gray-100 rounded-lg overflow-hidden">
                        <img src="https://via.placeholder.com/128x96?text=豆花面" class="w-full h-full object-cover" alt="推荐菜品">
                    </div>
                    <div class="mt-2">
                        <div class="text-sm font-medium">豆花面</div>
                        <div class="text-xs text-red-500 mt-1">¥22</div>
                    </div>
                </div>
                
                <!-- 推荐菜品3 -->
                <div class="w-32 flex-shrink-0">
                    <div class="w-full h-24 bg-gray-100 rounded-lg overflow-hidden">
                        <img src="https://via.placeholder.com/128x96?text=糯米饭" class="w-full h-full object-cover" alt="推荐菜品">
                    </div>
                    <div class="mt-2">
                        <div class="text-sm font-medium">糯米饭</div>
                        <div class="text-xs text-red-500 mt-1">¥15</div>
                    </div>
                </div>
                
                <!-- 推荐菜品4 -->
                <div class="w-32 flex-shrink-0">
                    <div class="w-full h-24 bg-gray-100 rounded-lg overflow-hidden">
                        <img src="https://via.placeholder.com/128x96?text=酸汤鱼" class="w-full h-full object-cover" alt="推荐菜品">
                    </div>
                    <div class="mt-2">
                        <div class="text-sm font-medium">酸汤鱼</div>
                        <div class="text-xs text-red-500 mt-1">¥68</div>
                    </div>
                </div>
                
                <!-- 推荐菜品5 -->
                <div class="w-32 flex-shrink-0">
                    <div class="w-full h-24 bg-gray-100 rounded-lg overflow-hidden">
                        <img src="https://via.placeholder.com/128x96?text=辣子鸡" class="w-full h-full object-cover" alt="推荐菜品">
                    </div>
                    <div class="mt-2">
                        <div class="text-sm font-medium">辣子鸡</div>
                        <div class="text-xs text-red-500 mt-1">¥48</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部操作栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white bottom-shadow p-3 flex justify-between items-center">
        <div class="flex items-center">
            <div class="flex flex-col items-center mr-4">
                <i class="action-icon iconfont icon-favorite"></i>
                <span class="text-xs text-gray-500">收藏</span>
            </div>
            <div class="flex flex-col items-center mr-4">
                <i class="action-icon iconfont icon-cart"></i>
                <span class="text-xs text-gray-500">购物车</span>
            </div>
            <div class="flex flex-col items-center">
                <i class="action-icon iconfont icon-shop"></i>
                <span class="text-xs text-gray-500">店铺</span>
            </div>
        </div>
        <div class="flex">
            <button class="outline-btn mr-2">加入购物车</button>
            <button class="primary-btn">立即预订</button>
        </div>
    </div>
</body>
</html> 